<template>
	<view class="page">
		<view class="fui-wrap">
			<fui-form ref="formRef" top="0" :model="formData">
				<view class="text">驳回理由</view>
				<fui-textarea min-height="240rpx" radius='16' placeholder="请输入驳回理由" autoHeight maxlength='200' isCounter
					v-model="formData.content"></fui-textarea>
				<view class="fui-btn__box">
					<fui-button text="取消" class="btn-50 btn-back" bold @click="goBack"></fui-button>
					<fui-button text="保存" class="btn-50" bold @click="submit"></fui-button>
				</view>
			</fui-form>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
    inject
	} from 'vue';
	import supplierApi from '@/api/supplier'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';

  const modal = inject('$modal')

	const formRef = ref(null)
	// 定义验证规则
	const rules = [{
		name: "content",
		rule: ["required"],
		msg: ["请输入驳回理由"]
	}];
	const id = ref()
  const companyName = ref('')
	onLoad((option) => {
		id.value = option.id
    companyName.value = decodeURIComponent(option.companyName)
	});
	// 初始化表单数据
	const formData = ref({
		content: ''
	});

	// 提交驳回
	const updateSupplierStatus = (() => {
		supplierApi.updateSupplierStatus({
			id: id.value,
			attestationState: 3,
			reviewedComments: formData.value.content
		}).then((res) => {
			if (res.code == 0) {
				uni.showToast({ // 注意：在 Vue3 + script setup 中仍需使用 uni 对象来调用 showToast
					title: '  提交成功  ',
					icon: 'success',
					duration: 1500
				});
				setTimeout(() => {
					uni.navigateBack({
						delta: 2
					})
				}, 1500)
			}
		})
	})
	const submit = () => {
		if (!formData.value.content) {
			modal.msgError('请输入驳回理由')
			return
		}
    modal.confirm(`您确认驳回供应商“${companyName.value}”的申请？`).then(async () => {
      // 获取fui-form组件实例
      try {
        // 调用validator方法并传入所需参数
        const res = await formRef.value.validator(formData.value, rules);
        if (res.isPassed) {
          updateSupplierStatus()
        } else {
          console.log('向上滑动页面查看错误提示！');
        }
      } catch (err) {
        console.log(err);
      }
    })
	}
	// 返回上一个页面
	const goBack = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style lang="scss">
	.page {
		width: 100%;
		height: 100%;
		padding: 30rpx 36rpx;
		box-sizing: border-box;
		overflow-y: auto;
		background: #F8F8F8;
		font-family: PingFang SC, PingFang SC;

		:deep(.fui-form__msg-wrap) {
			z-index: 11000;
		}

		:deep(.fui-textarea__wrap) {
			border: 1px solid #DFDFDF;
		}

		.text {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 30rpx;
		}

		.fui-btn__box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 60rpx;
		}

		.btn {
			width: calc(25% - 20rpx) !important;
			height: 76rpx !important;
			flex: inherit;

			:deep(.fui-button__primary) {
				height: 76rpx !important;
			}
		}

		.btn-50 {
			width: calc(50% - 20rpx) !important;
			flex: inherit;
		}

		.btn-back {
			:deep(.fui-button__primary) {
				background-color: #ffffff !important;
				color: var(--fui-color-primary) !important;
				border: 1PX solid var(--fui-color-primary) !important;

				.fui-text__bold {
					color: var(--fui-color-primary) !important;
				}
			}
		}
	}
</style>